<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/3/25
  Time: 17:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>信息管理主页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <jsp:include page="../../common/header.jsp"></jsp:include>
    <jsp:include page="../../common/side.jsp"></jsp:include>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;padding: 10px">
                <legend>部门信息管理</legend>
                <form class="layui-form">
                    <div class="layui-row">
                        <div class="layui-col-xs4">
                            <label class="layui-form-label">部门名称</label>
                            <div class="layui-input-block">
                                <input id="dname" type="text" name="name" lay-verify="deptName" autocomplete="off"
                                       placeholder="请输入部门名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit
                                        lay-filter="addDeptSub">立即添加
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius">重置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </fieldset>
            <table id="deptlist" lay-filter="onDeptTb"></table>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-sm" lay-event="edit">编辑<i class="layui-icon"></i></a>
                <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除<i class="layui-icon"></i></a>
            </script>
        </div>
    </div>

    <jsp:include page="../../common/footer.jsp"></jsp:include>
</div>
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<%--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>--%>
<script>
    //JavaScript代码区域
    layui.use(['element', 'table', 'jquery', 'form'], function () {
        var element = layui.element;
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;
        //第一个实例
        table.render({
            elem: '#deptlist'
            , id: "deptlist"
            , height: 500
            , url: '${pageContext.request.contextPath}/dept/deptList' //数据接口
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 5 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
                , limits: [1, 2, 5, 10, 20] //设置页容量选项
                , limit: 5 // 设置默认页容量
            }
            , cols: [[ //表头
                {type: 'checkbox'}
                , {field: 'id', title: '部门id', width: 120, sort: true, align: "center"}
                , {field: 'name', title: '部门名称', edit: "text", align: "center"}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', align: "center"}
            ]]
        });
        // 单元格编辑事件
        table.on('edit(onDeptTb)', function (obj) {
            // console.log(obj);
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            //layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
            //将修改信息发送到数据后台
            myAjax($, data, '${pageContext.request.contextPath}/dept/update', '')

        });
        //监听行工具事件
        table.on('tool(onDeptTb)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的要删除' + data.name + '么？', {icon: 0}, function (index) {
                    $.ajax({
                        url: '${pageContext.request.contextPath}/dept/delete',
                        data: data,
                        dataType: 'json',
                        type: 'post',
                        success: function (data) {
                            if (data.code === 1) {
                                layer.msg(data.message, {icon: 1});
                                obj.del();
                            } else {
                                layer.msg(data.message, {icon: 5});
                            }
                        }
                    })
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.name
                }, function (value, index) {
                    obj.update({
                        name: value
                    });
                    data.name = value;
                    console.log(data)
                    layer.close(index);
                    myAjax($, data, '${pageContext.request.contextPath}/dept/update', '')
                });
            }
        });
        //自定义验证规则
        form.verify({
            deptName: function (value) {
                if (value.trim().length < 1) {
                    return '此处不可以为空';
                }
            }
        });
        //监听提交
        form.on('submit(addDeptSub)', function (data) {
            /*layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })*/
            let name = data.field.name
            layer.confirm("确定添加一个部门为 '" + data.field.name + "' 吗?", {
                time: 10000, //10s后自动关闭
                btn: ['确认', '取消'],
                icon: 0,
                yes: function (index, layero) {
                    //按钮【'确认'】的回调

                    layer.close(index);
                    myAjax($, data.field,
                        '${pageContext.request.contextPath}/dept/insert',
                        "")
                    rbReload($, table);
                }
                , btn2: function (index, layero) {
                    //按钮【'取消'】的回调
                }
            });
            return false;
        });
    });

    function rbReload($, table) {
        table.reload('deptlist', {
            url: '${pageContext.request.contextPath}/dept/deptList'
        });
    }

    function myAjax($, myData, url, sucsUrl) {
        $.ajax({
            //url:'${pageContext.request.contextPath}/dept/update',
            url: url,
            data: myData,
            dataType: 'json',
            type: 'post',
            success: function (data) {
                if (data.code === 1) {
                    layer.msg(data.message, {icon: 1});
                    if (sucsUrl !== "") {
                        setTimeout(() => {
                            //location.href = "${pageContext.request.contextPath}/dept/dept";
                            location.href = sucsUrl;
                        }, 500)
                    }
                } else {
                    layer.msg(data.message, {icon: 5});
                    flag = false;
                }
            }
        })
    }
</script>
</body>
</html>
